<template>
  <div class="favorites-container">
    <a-layout-header class="header">
      <div class="header-content">
        <div class="header-left">
          <h2 class="page-title">
            <star-outlined />
            我的收藏
            <a-tag color="blue">{{ totalCount }} 个收藏</a-tag>
          </h2>
        </div>
        <div class="header-right">
          <a-space>
            <a-input-search
              v-model:value="searchText"
              placeholder="搜索收藏内容"
              style="width: 300px"
              @search="onSearch"
            />
            <a-select
              v-model:value="sortBy"
              style="width: 120px"
              @change="onSortChange"
            >
              <a-select-option value="time">收藏时间</a-select-option>
              <a-select-option value="title">标题</a-select-option>
            </a-select>
          </a-space>
        </div>
      </div>
    </a-layout-header>

    <a-layout class="main-content">
      <!-- 左侧导航 -->
      <a-layout-sider width="200" class="left-sider">
        <a-menu
          v-model:selectedKeys="selectedCategory"
          mode="inline"
          class="side-menu"
        >
          <a-menu-item key="all">
            <template #icon><folder-outlined /></template>
            全部收藏
          </a-menu-item>
          <a-menu-item key="posts">
            <template #icon><file-text-outlined /></template>
            帖子收藏
          </a-menu-item>
          <a-menu-item key="comments">
            <template #icon><message-outlined /></template>
            评论收藏
          </a-menu-item>
        </a-menu>
      </a-layout-sider>

      <a-layout-content class="content-area">
        <a-card class="section-card" title="我的收藏列表">
          <a-list
            :data-source="filteredFavorites"
            :loading="loading"
            item-layout="vertical"
            class="favorites-list"
          >
            <template #renderItem="{ item }">
              <a-list-item class="favorite-item hover-shadow">
                <a-list-item-meta>
                  <template #avatar>
                    <a-avatar :src="item.avatar || '/default-avatar.png'" />
                  </template>
                  <template #title>
                    <div class="item-title">
                      <a @click="viewItem(item)">{{ item.title }}</a>
                      <a-tag :color="item.type === 'post' ? 'blue' : 'green'" class="type-tag">
                        {{ item.type === 'post' ? '帖子' : '评论' }}
                      </a-tag>
                    </div>
                  </template>
                  <template #description>
                    <div class="item-desc">
                      <p class="item-content">{{ item.description }}</p>
                      <div class="item-meta">
                        <span class="meta-item">
                          <clock-circle-outlined /> 收藏于 {{ item.createTime }}
                        </span>
                        <span class="meta-item">
                          <user-outlined /> 来自 {{ item.source }}
                        </span>
                      </div>
                    </div>
                  </template>
                </a-list-item-meta>
                <div class="item-actions">
                  <a-button type="primary" size="small" @click="viewItem(item)">
                    <template #icon><eye-outlined /></template>
                    查看
                  </a-button>
                  <a-popconfirm
                    title="确定要取消收藏吗？"
                    @confirm="removeFavorite(item.id)"
                    ok-text="确定"
                    cancel-text="取消"
                  >
                    <a-button type="primary" danger size="small">
                      <template #icon><delete-outlined /></template>
                      取消收藏
                    </a-button>
                  </a-popconfirm>
                </div>
              </a-list-item>
            </template>
            
            <!-- 空状态 -->
            <template #empty>
              <div class="empty-state">
                <inbox-outlined class="empty-icon" />
                <p class="empty-text">暂无收藏内容</p>
                <a-button type="primary" @click="$router.push('/')">
                  去首页浏览
                </a-button>
              </div>
            </template>
          </a-list>
        </a-card>
      </a-layout-content>

      <a-layout-sider width="300" class="right-sider">
        <!-- 收藏统计卡片 -->
        <a-card class="stats-card hover-shadow" :bordered="false">
          <template #title>
            <div class="card-title">
              <bar-chart-outlined />
              收藏统计
            </div>
          </template>
          <div class="stats-content">
            <div class="stat-item">
              <div class="stat-value">{{ totalCount }}</div>
              <div class="stat-label">总收藏数</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ postCount }}</div>
              <div class="stat-label">帖子收藏</div>
            </div>
            <div class="stat-item">
              <div class="stat-value">{{ commentCount }}</div>
              <div class="stat-label">评论收藏</div>
            </div>
          </div>
        </a-card>

        <!-- 最近收藏卡片 -->
        <a-card title="最近收藏" class="recent-card hover-shadow">
          <a-list :data-source="recentFavorites" size="small">
            <template #renderItem="{ item }">
              <a-list-item>
                <a-list-item-meta>
                  <template #title>
                    <a @click="viewItem(item)">{{ item.title }}</a>
                  </template>
                  <template #description>
                    <span>{{ item.createTime }}</span>
                  </template>
                </a-list-item-meta>
              </a-list-item>
            </template>
          </a-list>
        </a-card>
      </a-layout-sider>
    </a-layout>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { 
  StarOutlined, 
  FolderOutlined, 
  FileTextOutlined, 
  MessageOutlined,
  ClockCircleOutlined,
  UserOutlined,
  EyeOutlined,
  DeleteOutlined,
  BarChartOutlined,
  InboxOutlined
} from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const searchText = ref('')
const selectedCategory = ref(['all'])
const sortBy = ref('time')

// 模拟数据
const favorites = ref([
  {
    id: 1,
    type: 'post',
    title: '如何提高编程效率？',
    description: '本文介绍了提高编程效率的十个实用技巧，包括使用快捷键、代码片段、自动化工具等方面的内容。',
    source: '技术专区',
    createTime: '2024-01-20 15:30:00',
    avatar: 'https://joeschmoe.io/api/v1/random'
  },
  {
    id: 2,
    type: 'post',
    title: '前端框架对比：React vs Vue vs Angular',
    description: '详细分析了三大前端框架的优缺点，适用场景以及性能对比，帮助开发者选择最适合自己项目的框架。',
    source: '前端讨论',
    createTime: '2024-01-18 09:15:00',
    avatar: 'https://joeschmoe.io/api/v1/random'
  },
  {
    id: 3,
    type: 'comment',
    title: '关于Docker容器化的精彩评论',
    description: '容器化技术确实解决了很多环境一致性问题，但在微服务架构中还需要考虑服务发现、负载均衡等问题。',
    source: '云计算专题',
    createTime: '2024-01-15 14:20:00',
    avatar: 'https://joeschmoe.io/api/v1/random'
  },
  {
    id: 4,
    type: 'post',
    title: '人工智能在医疗领域的应用',
    description: '探讨了AI在医疗影像识别、疾病预测、药物研发等方面的最新进展和未来发展方向。',
    source: 'AI研究',
    createTime: '2024-01-10 11:45:00',
    avatar: 'https://joeschmoe.io/api/v1/random'
  },
  {
    id: 5,
    type: 'comment',
    title: '关于敏捷开发方法论的讨论',
    description: '敏捷开发不仅是一种方法论，更是一种思维方式，需要团队成员的充分理解和配合才能发挥最大效果。',
    source: '项目管理',
    createTime: '2024-01-05 16:30:00',
    avatar: 'https://joeschmoe.io/api/v1/random'
  }
])

// 计算总收藏数
const totalCount = computed(() => favorites.value.length)

// 计算帖子收藏数
const postCount = computed(() => favorites.value.filter(item => item.type === 'post').length)

// 计算评论收藏数
const commentCount = computed(() => favorites.value.filter(item => item.type === 'comment').length)

// 最近收藏
const recentFavorites = computed(() => {
  return [...favorites.value]
    .sort((a, b) => new Date(b.createTime) - new Date(a.createTime))
    .slice(0, 3)
})

// 过滤和排序收藏列表
const filteredFavorites = computed(() => {
  let result = [...favorites.value]
  
  // 按分类过滤
  if (selectedCategory.value[0] !== 'all') {
    result = result.filter(item => {
      if (selectedCategory.value[0] === 'posts') return item.type === 'post'
      if (selectedCategory.value[0] === 'comments') return item.type === 'comment'
      return true
    })
  }
  
  // 搜索过滤
  if (searchText.value) {
    const search = searchText.value.toLowerCase()
    result = result.filter(item => 
      item.title.toLowerCase().includes(search) || 
      item.description.toLowerCase().includes(search)
    )
  }
  
  // 排序
  result.sort((a, b) => {
    if (sortBy.value === 'time') {
      return new Date(b.createTime) - new Date(a.createTime)
    }
    return a.title.localeCompare(b.title)
  })
  
  return result
})

// 查看收藏项
const viewItem = (item) => {
  if (item.type === 'post') {
    router.push(`/post/${item.id}`)
  } else {
    router.push(`/post/${item.postId || 1}#comment-${item.id}`)
  }
}

// 取消收藏
const removeFavorite = (id) => {
  favorites.value = favorites.value.filter(item => item.id !== id)
  message.success('已取消收藏')
}

// 搜索
const onSearch = (value) => {
  searchText.value = value
}

// 排序方式改变
const onSortChange = (value) => {
  sortBy.value = value
}
</script>

<style lang="scss" scoped>
@mixin hover-animation {
  transition: all 0.3s ease;
  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }
}

@mixin card-base {
  background: white;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  animation: slideUp 0.6s ease-out;
  @include hover-animation;
}

.favorites-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #f0f2f5 100%);

  .header {
    background: rgba(255, 255, 255, 0.95);
    padding: 0;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    width: 100%;
    z-index: 1000;
    transition: all 0.3s ease;
    margin-bottom: 24px;

    &:hover {
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .header-content {
      max-width: 1400px;
      margin: 0 auto;
      height: 64px;
      display: flex;
      align-items: center;
      padding: 0 24px;
      justify-content: space-between;

      .header-left {
        .page-title {
          margin: 0;
          font-size: 20px;
          font-weight: 600;
          display: flex;
          align-items: center;
          gap: 12px;
          background: linear-gradient(45deg, #1890ff, #40a9ff);
          -webkit-background-clip: text;
          color: transparent;

          .anticon {
            font-size: 24px;
            background: linear-gradient(45deg, #1890ff, #40a9ff);
            -webkit-background-clip: text;
            color: transparent;
          }
        }
      }
    }
  }

  .main-content {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    gap: 24px;

    .left-sider {
      background: transparent;
      width: 240px !important;
      margin-right: 24px;

      .side-menu {
        background: transparent;
        border-right: none;
        padding: 8px;

        :deep(.ant-menu-item) {
          height: 44px;
          line-height: 44px;
          margin: 4px 0;
          padding: 0 16px;
          border-radius: 8px;
          transition: all 0.3s ease;

          .anticon {
            font-size: 18px;
          }

          &:hover {
            color: #1890ff;
            background: rgba(24, 144, 255, 0.1);
            transform: translateX(4px);
          }

          &.ant-menu-item-selected {
            background: linear-gradient(45deg, #1890ff, #40a9ff);
            color: white;
            font-weight: 500;
            box-shadow: 0 4px 12px rgba(24, 144, 255, 0.2);

            &:hover {
              transform: translateX(4px);
              box-shadow: 0 6px 16px rgba(24, 144, 255, 0.3);
            }
          }
        }
      }
    }

    .content-area {
      flex: 1;
      min-width: 0;
      padding: 0 !important;

      .section-card {
        @include card-base;

        :deep(.ant-card-head) {
          padding: 16px 24px;
          border-bottom: 1px solid #f0f0f0;
          background: linear-gradient(to right, #ffffff, #f8f9fa);

          .ant-card-head-title {
            font-size: 18px;
            font-weight: 600;
            background: linear-gradient(45deg, #1890ff, #40a9ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        .favorites-list {
          .favorite-item {
            padding: 16px 24px;
            transition: all 0.3s ease;
            border-bottom: 1px solid #f0f0f0;
            cursor: pointer;
            position: relative;

            &:last-child {
              border-bottom: none;
            }

            &:hover {
              background: linear-gradient(to right, rgba(24, 144, 255, 0.02), transparent);
              transform: translateX(4px);

              &::after {
                content: '';
                position: absolute;
                left: 0;
                top: 0;
                width: 4px;
                height: 100%;
                background: linear-gradient(to bottom, #1890ff, #40a9ff);
                border-radius: 2px;
                opacity: 0.8;
              }

              .ant-avatar {
                transform: scale(1.1);
                border: 2px solid #1890ff;
              }

              .item-title a {
                color: #1890ff;
              }
            }

            .ant-list-item-meta {
              align-items: flex-start;
              margin-bottom: 16px;

              .ant-avatar {
                transition: all 0.3s ease;
                border: 2px solid transparent;
              }

              .item-title {
                display: flex;
                align-items: center;
                gap: 8px;
                margin-bottom: 8px;

                a {
                  font-size: 16px;
                  font-weight: 500;
                  color: #262626;
                  transition: all 0.3s ease;
                  
                  &:hover {
                    color: #1890ff;
                  }
                }

                .type-tag {
                  margin: 0;
                  border-radius: 4px;
                  padding: 2px 8px;
                  font-size: 12px;
                  border: none;
                  transition: all 0.3s ease;
                }
              }

              .item-desc {
                .item-content {
                  color: #595959;
                  margin: 0 0 8px;
                  line-height: 1.6;
                }

                .item-meta {
                  color: #8c8c8c;
                  font-size: 13px;
                  display: flex;
                  flex-wrap: wrap;
                  gap: 16px;

                  .meta-item {
                    display: flex;
                    align-items: center;
                    gap: 4px;
                  }
                }
              }
            }

            .item-actions {
              display: flex;
              gap: 12px;
              justify-content: flex-end;
              margin-top: 8px;

              .ant-btn {
                display: flex;
                align-items: center;
                gap: 4px;
                border-radius: 6px;
                transition: all 0.3s ease;

                &:hover {
                  transform: translateY(-2px);
                }

                &.ant-btn-primary {
                  background: linear-gradient(45deg, #1890ff, #40a9ff);
                  border: none;
                  box-shadow: 0 2px 6px rgba(24, 144, 255, 0.35);

                  &:hover {
                    box-shadow: 0 4px 12px rgba(24, 144, 255, 0.45);
                  }

                  &.ant-btn-dangerous {
                    background: linear-gradient(45deg, #ff4d4f, #ff7875);
                    box-shadow: 0 2px 6px rgba(255, 77, 79, 0.35);

                    &:hover {
                      box-shadow: 0 4px 12px rgba(255, 77, 79, 0.45);
                    }
                  }
                }
              }
            }
          }
        }

        .empty-state {
          padding: 48px 0;
          text-align: center;
          color: #8c8c8c;

          .empty-icon {
            font-size: 48px;
            margin-bottom: 16px;
            color: #bfbfbf;
          }

          .empty-text {
            font-size: 14px;
            margin-bottom: 16px;
          }
        }
      }
    }

    .right-sider {
      width: 300px !important;
      background: transparent;

      .stats-card {
        background: white;
        border-radius: 12px;
        margin-bottom: 24px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        :deep(.ant-card-head) {
          padding: 16px 24px;
          border-bottom: 1px solid #f0f0f0;
          background: linear-gradient(to right, #ffffff, #f8f9fa);

          .ant-card-head-title {
            padding: 0;
            
            .card-title {
              display: flex;
              align-items: center;
              gap: 8px;
              font-size: 16px;
              font-weight: 600;
              background: linear-gradient(45deg, #1890ff, #40a9ff);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;

              .anticon {
                font-size: 18px;
              }
            }
          }
        }

        .stats-content {
          padding: 16px 24px;
          display: flex;
          justify-content: space-around;

          .stat-item {
            text-align: center;

            .stat-value {
              font-size: 24px;
              font-weight: 600;
              color: #1890ff;
              margin-bottom: 4px;
            }

            .stat-label {
              font-size: 14px;
              color: #8c8c8c;
            }
          }
        }
      }

      .recent-card {
        background: white;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        transition: all 0.3s ease;
        animation: slideUp 0.6s ease-out;

        &:hover {
          transform: translateY(-4px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        }

        :deep(.ant-card-head) {
          padding: 16px 24px;
          border-bottom: 1px solid #f0f0f0;
          background: linear-gradient(to right, #ffffff, #f8f9fa);

          .ant-card-head-title {
            font-size: 18px;
            font-weight: 600;
            background: linear-gradient(45deg, #1890ff, #40a9ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
          }
        }

        :deep(.ant-list-item) {
          padding: 16px 24px;
          transition: all 0.3s ease;

          &:hover {
            background: linear-gradient(to right, rgba(24, 144, 255, 0.02), transparent);
            transform: translateX(4px);
          }

          .ant-list-item-meta-title {
            a {
              color: #262626;
              transition: all 0.3s ease;
              
              &:hover {
                color: #1890ff;
              }
            }
          }

          .ant-list-item-meta-description {
            color: #8c8c8c;
            font-size: 12px;
          }
        }
      }
    }
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 响应式设计
@media screen and (max-width: 768px) {
  .favorites-container {
    .header {
      .header-content {
        padding: 0 16px;
        flex-direction: column;
        height: auto;
        padding: 16px;
        gap: 16px;

        .header-left {
          width: 100%;
        }

        .header-right {
          width: 100%;
        }
      }
    }

    .main-content {
      flex-direction: column;
      padding: 0 16px;

      .left-sider,
      .right-sider {
        width: 100% !important;
        margin: 0 0 16px 0;
      }

      .content-area {
        .section-card {
          .favorite-item {
            padding: 16px;

            .item-actions {
              flex-direction: column;
              align-items: flex-end;
            }
          }
        }
      }
    }
  }
}
</style> 